<template>
  <div id="container">
    <a-row :gutter="16">
      <a-col :span="4">
        <switch-theme />
        <br/>
        <br/>
        <a-upload
            action="/api/upload"
            name="file"
            :data="uploadData"
            @change="handleFileChange"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            Click to Upload
          </a-button>
        </a-upload>
      </a-col>
      <a-col :span="10">
        <a-button @click="loadData">加载数据</a-button>
        <a-directory-tree
            style="margin-top: 10px"
            :tree-data="treeData"
            @select="selectTreeNode"
        >
          <template #title="{ key: treeKey, title,path,src,dir}">
            <a-dropdown :trigger="['contextmenu']">
              <span>{{ title }}</span>
              <template #overlay>
                <a-menu>
                  <!--                  <a-menu-item key="1" v-if="!dir" @click="download(src)">下载</a-menu-item>-->
                  <a-menu-item key="1" v-if="!dir">
                    <a :href="src" target="_blank">下载</a>
                  </a-menu-item>
                  <a-menu-item key="2">
                    <a-popconfirm
                        :title="`确定要删除文件 ${title} 么?`"
                        @confirm="del(src)"
                    >
                      删除
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </a-directory-tree>
      </a-col>
      <a-col :span="10">
        <a-typography-paragraph copyable class="liInfo_div">
          {{srcContent}}
        </a-typography-paragraph>
        <br/>
        <img v-if="imgFlag" style="width: 300px;height: 300px;cursor: pointer;"  :src="imgSrc"  />
        <a-typography-paragraph v-if="txtFlag" copyable class="liInfo_div">
          <highlightjs language="txt" :code="fileContent"/>
        </a-typography-paragraph>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import Http from '@/utils/Http'
import ApiUrls from '@/utils/ApiUrls'
import { UploadOutlined } from '@ant-design/icons-vue';
import SwitchTheme from "@/view/theme/switch-theme.vue"

const uploadData = ref({module: 'fms/user'})
const handleFileChange = function (e) {
  if (e.file.status == 'done') {
    var res = e.fileList[0]
    if (res.status == 'done') {
      loadData()
    }
  }
}

const treeData = ref()
const srcContent = ref('')
const fileContent = ref('')
const imgSrc = ref('')
const imgFlag = ref(false)
const txtFlag = ref(false)
var img = Array.of(".jpg", ".png", ".gif", "jpeg");
var txt = Array.of(".txt", ".json", ".xml", ".java", ".js", ".vue");
function endsWith(str, arr) {
  var flg = false;
  for (let char of arr) {
    flg = flg || (str.endsWith(char));
  }
  return flg;
}

const key = 'updatable';
const loadData = function () {
  treeData.value = []
  Http.post(ApiUrls.node.tree, {})
      .then(function (res) {
        treeData.value = res.data.data
      })
      .catch(function (error) {
        console.log(error);
      });
}
const selectTreeNode = function (selectedKeys, e) {
  if (!e.node.dir) {
    let src = e.node.src
    let path = e.node.path
    srcContent.value = src
    if (endsWith(path, img)) {
      imgFlag.value = true
      txtFlag.value = false
      imgSrc.value = src

    } else if (endsWith(path, txt)) {
      imgFlag.value = false
      txtFlag.value = true
      Http.post(ApiUrls.node.getfilecontent, {path: path})
          .then(function (res) {
            fileContent.value = ''
            var html = ''
            for (let c of res.data.data) {
              html += c + "\n"
            }
            fileContent.value = html;
          })
          .catch(function (error) {
            console.log(error);
          });
    } else {
      imgFlag.value = false
      txtFlag.value = false
      srcContent.value = '';
    }
  } else {
    imgFlag.value = false
    txtFlag.value = false
    srcContent.value = '';
  }
}
const onContextMenuClick = (treeKey, menuKey) => {
  console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
};

const download = (src) => {
  window.location = src;
}
const del = (src) => {
  Http.post(ApiUrls.upload.delete, {path: src})
      .then(function (res) {
        if (res.data.success) {
          loadData()
        }
      })
      .catch(function (error) {
        console.log(error);
      });
}


</script>

<style>
#container {
  padding: 20px 50px;
}

.liInfo_div {
  border: solid 1px #CCC;
  padding: 5px;
  margin-top: 5px;
  height: auto;
}
</style>